<style lang="scss" scoped>
  $mainColor: #179AFE;
  $borderColor: #e9e9e9;

  .withdrawal-form{
    padding: .2rem;
    background-color: #fff;
    margin-bottom: 64px;
  }
  .income-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid $borderColor;
    padding: .2rem 0;
    background-color: #fff;
    .item-left{
      color: #333;
      .tit{
        font-size: .28rem;
        margin-bottom: .1rem;
        color: #666;
      }
      .date{
        font-size: .24rem;
        color: #999;
      }
    }
    .item-right{
      font-size: .28rem;
      .num{
        color: $mainColor;
        margin-bottom: .1rem;
      }
      .status{
        color: #999;
      }
    }
  }
  .select-submit{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #e9e9e9;
    .count{
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
    }
    .submit{
      width: 1.8rem;
    }
  }
  .com-no-data{
    margin-top: 2rem;
    text-align: center;
    font-size: .32rem;
    color: #999;
  }
</style>
<style>
  .withdrawal-form .van-checkbox__label{
    flex: 1;
  }
  .withdrawal-form .van-checkbox__icon{
    margin: 0 .2rem;
  }
</style>

<template>
  <div class="container hasNav">
    <van-nav-bar title="可提现订单" left-arrow left-text="返回" @click-left="$router.back()" fixed />
    <template v-if="checkList && checkList.length">
      <div class="withdrawal-form">
        <van-checkbox
            v-model="checkAll"
            @click="checkAllEvent"
            style="margin-bottom: .2rem;">全选</van-checkbox>

        <van-checkbox-group
            v-model="checked"
            @change="handleCheckedChange"
            ref="checkboxGroup">
          <van-checkbox :name="item.id" v-for="(item, index) in checkList" :key="index">
            <div
                class="income-item"
                @click="goDetail(item)">
              <div class="item-left">
                <div class="tit">{{item.costType}}</div>
                <div class="date">{{item.payTime}}</div>
              </div>
              <div class="item-right">
                <div class="num">{{item.payMoney}}</div>
                <div class="status">{{item.drawingsStatus}}</div>
              </div>
            </div>
          </van-checkbox>
        </van-checkbox-group>
      </div>

      <div class="select-submit">
        <div class="count">已提取金额 {{total.toFixed(2)}} 元</div>
        <div class="submit">
          <van-button block type="default" color="#179AFE" @click="goWithdrawal">提交</van-button>
        </div>
      </div>
    </template>

    <template v-else>
      <div class="com-no-data">您还没有可提现订单!</div>
    </template>
  </div>
</template>

<script>
  import { getCanWithdrawalList } from "../../api/user";

  export default {
    name: 'Withdrawal',
    data() {
      return {
        checkAll: false,
        checkList: [],
        checked: [],
        total: 0
      };
    },
    mounted() {
      this.getCanWithdrawalList();
    },
    computed: {

    },
    methods: {
      async getCanWithdrawalList() {
        const { canDrawingsOrderList } = await getCanWithdrawalList();
        this.checkList = canDrawingsOrderList
      },
      checkAllEvent(e) {
        this.$refs.checkboxGroup.toggleAll(this.checkAll)
      },
      handleCheckedChange(e) {
        this.checkAll = e.length === this.checkList.length
      },
      goDetail(item) {
        this.$router.push(`/user/incomeDetail?type=1&detail=${JSON.stringify(item)}`)
      },
      goWithdrawal() {
        if(this.total > 0 && this.checked.length) {
          this.$router.push(`/user/withdrawal?orderIds=${this.checked.join(',')}&money=${this.total.toFixed(2)}`)
        }
      }
    },
    watch: {
      checked(n) {
        this.total = 0;
        this.checkList.forEach(k => {
          if(n.includes(k.id)) {
            this.total += parseFloat(k.payMoney)
          }
        })
      }
    }
  };
</script>
